<script setup lang="ts">
import { computed } from 'vue'
import { oss_url } from '@/pinia/getter'
const props = defineProps({
  /**
   * 图片url
   */
  src:{
    type:String,
    default:''
  },
  /**
   * 放大的img list
   */
  list:{
    type:Array<string>,
    default:()=>[]
  },
})
const filtersImgOssUrl = (url:string)=>{
  if(url.indexOf(oss_url.value) == -1) return `${oss_url.value}/${url}`
  return url
}
const showimg = computed(()=>{
  return filtersImgOssUrl(props.src)
})
const imglist = computed(()=>{
  return props.list.map((res)=>{
    return filtersImgOssUrl(res)
  })
})
</script>

<template>
  <el-image
    v-if="src"
    :preview-teleported="true"
    :src="showimg"
    :preview-src-list="imglist"
    hide-on-click-modal
    lazy
    fit="fill"
  >
    <template #error>
      <span></span>
    </template>
  </el-image>
</template>

<style lang="scss" scoped>

</style>
